<template>
  <el-dialog :close-on-click-modal="false" draggable :title="setType===0?'流转子课题':'完成子课题'" v-model="visible" width="800px"
             append-to-body style="margin-top: 200px!important;">
    <el-form ref="bizTopicRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item v-if="setType===0" label="负责人" prop="managerId">
        <el-button class="user-btn-width" @click="openSelectUser">{{ form.managerName || '请选择负责人' }}</el-button>
      </el-form-item>
      <el-form-item label="跟进情况说明" prop="content">
        <el-input maxlength="500" type="textarea" rows="4" v-model="form.remark" placeholder="请输入内容"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <selectUser ref="selectRef" @ok="handleSelectUser"/>
</template>
<script setup name="TopicSet">
import {getBizTopic, updateBizTopic} from "@/api/biz/bizTopic.js";
import selectUser from "@/views/system/user/selectUser.vue";

const {proxy} = getCurrentInstance();
const emit = defineEmits(["ok"]);
const props = defineProps({
  setType: {
    type: [Number, String]
  },
  topicId: {
    type: [Number, String]
  }
});
watch(() => [props.topicId, props.setType], ([newTopicId, newTypeValue]) => {
  getBizTopic(newTopicId).then(response => {
    form.value = response.data;
    if (newTypeValue == 1) {
      form.value.status = 2;
    }
  });
});
const visible = ref(false);
const data = reactive({
  form: {},
  rules: {
    projectId: [
      {required: true, message: "所属项目不能为空", trigger: "submit"}
    ],
    managerId: [
      {required: true, message: "负责人不能为空", trigger: "submit"}
    ],
    startTime: [
      {required: true, message: "预计开始时间不能为空", trigger: "submit"}
    ],
    endTime: [
      {required: true, message: "截止时间不能为空", trigger: "submit"}
    ],
    topicName: [
      {required: true, message: "课题名称不能为空", trigger: "submit"}
    ],
  }
});
const {form, rules} = toRefs(data);

/** 提交按钮 */
function submitForm() {
  proxy.$refs["bizTopicRef"].validate(valid => {
    if (valid) {
      updateBizTopic(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        visible.value = false;
        emit("ok");
      });
    }
  });
}

function cancel() {
  visible.value = false;
}

function handleSelectUser(data) {
  form.value.managerName = data.value[0].nickName;
  form.value.managerId = data.value[0].userId;
}

/** 打开授权用户表弹窗 */
function openSelectUser() {
  proxy.$refs["selectRef"].show();
}

// 显示弹框
function show() {
  visible.value = true;
}

defineExpose({
  show,
});
</script>